<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../assets/libs/layui/css/layui.css">
    <style>
        .canvas {
            height: 600px;
            background-color: #f5f7f9;
        }
    </style>

    <!-- example styles -->
    <style>
        .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
            stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
        }
        .needs-discussion-curr:not(.djs-connection) .djs-visual > :nth-child(1) {
            stroke: rgba(234, 129, 67, 0.7) !important; /* color elements as red */
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <input id="processInstance" type="text"/>
        <button type="button" class="layui-btn-primary" id="search">查询</button>
        <button type="button" class="layui-btn-primary" id="complete">Complete</button>
        <div class="layui-row">
            <div class="layui-col-md12">
                <table id="table_process_instance" lay-filter="table_process_instance"></table>
            </div>
            <div class="layui-col-md12">
                <div class="canvas" id="view_canvas"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../assets/libs/layui/layui.js"></script>
<!-- viewer distro (with pan and zoom) -->
<script src="../assets/libs/bpmn-navigated-viewer.development.js"></script>
<!-- needed for this example only -->
<script src="../assets/libs/jquery.js"></script>
<script>
    layui.use(['element', 'table'], function(){
        var $ = layui.$;
        var element = layui.element;
        var table = layui.table;

        $("#search").click(function() {
            reloadTableData();
        });

        var curr_id = "";
        $("#complete").click(function() {
            var processInstanceId = $("#processInstance").val();
            $.post('/processInstance/complete', {
                processInstance_id: processInstanceId,
                "curr_id": curr_id
            }, function() {
                reloadTableData();
            })
        });

        table.render({
            elem: '#table_process_instance',
            data: [],
            cols: [[
                {type: 'numbers'},
                {title: 'activityId', field: 'activityId'},
                {title: 'activityName', field: 'activityName'},
                {title: 'activityType', field: 'activityType'},
                {title: 'assignee', field: 'assignee'},
                {title: 'taskId', field: 'taskId'},
                {title: 'executionId', field: 'executionId'},
                {title: 'startTime', field: 'startTime'},
                {title: 'endTime', field: 'endTime'}
            ]],
            height: 300,
            limit: 1000
        });

        var reloadTableData = function () {
            var processInstanceId = $("#processInstance").val();
            $.post('/processInstance/history', {
                processInstanceId: processInstanceId
            }, function(res) {
                var history = res.data.history;
                var highLightedActivitis = res.data.highLightedActivitis;
                var highLightedFlows = res.data.highLightedFlows;
                var currIds = res.data.currIds;

                curr_id = "";
                for(var i=0; i<currIds.length; i++) {
                    if (i > 0) {
                        curr_id += ",";
                    }
                    curr_id += currIds[i];
                }

                if(history) {
                    table.reload('table_process_instance', {data: history});
                    showProcess(processInstanceId, highLightedActivitis, highLightedFlows, currIds);
                } else {
                    table.reload('table_process_instance', {data: []});
                }
            })
        };

        // viewer instance
        var bpmnViewer = new BpmnJS({
            container: '#view_canvas'
        });

        /**
         * 显示流程图
         */
        var showProcess = function(processInstanceId, highLightedActivitis, highLightedFlows, currIds) {
            var diagramUrl = '/processInstance/diagram/' + processInstanceId;
            async function openDiagram(bpmnXML) {
                try {
                    await bpmnViewer.importXML(bpmnXML);
                    // access viewer components
                    var canvas = bpmnViewer.get('canvas');

                    // zoom to fit full viewport
                    canvas.zoom('fit-viewport');

                    // add marker
                    for(var i=0; i<highLightedActivitis.length; i++) {
                        canvas.addMarker(highLightedActivitis[i], 'needs-discussion');
                    }
                    for(var i=0; i<currIds.length; i++) {
                        canvas.addMarker(currIds[i], 'needs-discussion-curr');
                    }
                } catch (err) {
                    console.error('could not import BPMN 2.0 diagram', err);
                }
            }
            $.get(diagramUrl, openDiagram, 'text');
        }
    });
</script>
</body>
</html>